<template>
  <div class="container">
    <!--添加响应式 -->
    <el-row class="main-layout">
      <!-- 左侧区域添加响应式 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" class="left-col">
        <!-- 待办卡片 -->
        <TodoListCard
          :active-tab="activeTab"
          :todo-list="todoList"
          :pagination="TodoListPagination"
          @tab-change="handleTabChange"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @process="handleProcess"
        />

        <!-- 通讯录卡片 -->
        <ContactsCard
          :contact-list="contactList"
          :pagination="contactsPagination"
          :contact-columns="contactColumns"
          @update:name="handleNameUpdate"
          @size-change="handleContactsSizeChange"
          @current-change="handleContactsPageChange"
        />
      </el-col>

      <!-- 右侧区域响应式处理 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" class="right-col">
        <!-- 规章制度 -->
        <el-card class="regulation-card" style='margin-top: 10px;'>
          <div class="custom-tabs-label">
            <img src="@/assets/images/backlog.jpg" alt="" />
            <span>规章制度</span>
          </div>

          <ul class="regulation-list">
            <li v-for="(item, index) in regulationList" :key="index">
              <span class="date">{{ item.date }}</span>
              <span class="content">{{ item.content }}</span>
            </li>
          </ul>
        </el-card>

        <!-- 我的提醒 -->
        <el-card class="reminder-card">
          <div class="header-with-more">
            <div class="custom-tabs-label">
              <img src="@/assets/images/backlog.jpg" alt="" />
              <span>我的提醒</span>
            </div>

            <el-link type="primary">更多>></el-link>
          </div>
          <ul class="reminder-list">
            <li
              v-for="(item, index) in remindList"
              :key="index"
              class="custom-list-item"
            >
              <div class="reminder-item">
                <!-- <span class="dot">●</span> -->
                <div class="content">
                  <p class="text">{{ item.remindTitle }}</p>
                  <p class="date">{{ item.createTime }}</p>
                </div>
              </div>
            </li>
          </ul>
        </el-card>

        <!-- 快捷入口响应式 -->
        <el-card class="quick-entry-card">
          <div class="custom-tabs-label">
            <img src="@/assets/images/backlog.jpg" alt="" />
            <span>快捷入口</span>
          </div>

          <el-row :gutter="10" class="entry-buttons">
            <el-col
              v-for="(entry, index) in quickEntries"
              :key="index"
              :xs="12"
              :sm="12"
              :md="12"
              :lg="12"
            >
              <el-button
                class="entry-btn"
                size="small"
                plain
                @click="handleEntryClick(entry)"
              >
                {{ entry }}
                <!-- <span class="hot-tag" v-if="(entry)">NEW</span> -->
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { scheduleList, Myreminder } from "@/api/PersonalWorkbench/index.js";
import { pageList } from "@/api/employeeRelations/Archive";

import TodoListCard from "../subcomponent/HR/TodoListCard.vue";
import ContactsCard from "../subcomponent/HR/ContactsCard.vue";
const activeTab = ref("todo");
const searchKey = ref("");
const router = useRouter();

const tabs = [];

const contactColumns = [
  { prop: "name", label: "姓名", minWidth: 100 },
  { prop: "name", label: "工号", minWidth: 80 },
  { prop: "sex", label: "性别", minWidth: 100 },
  { prop: "deptName", label: "部门", minWidth: 80 },
  { prop: "jobName", label: "岗位", minWidth: 100 },
  { prop: "phoneNumber", label: "手机号码", minWidth: 80 },
];

// 计算属性处理筛选
const filteredContacts = computed(() => {
  return contactList.value.filter((item) =>
    item.name.includes(searchKey.value)
  );
});
// 按钮配置数据
const quickEntries = ref(["转正申请", "调动申请", "离职申请", "我的档案"]);
const todoList = ref([]);

const contactList = ref([]);

const regulationList = ref([
  { date: "11-12", content: "公司关于2025年第一季度最新考勤制度内容" },
  { date: "11-12", content: "公司关于2025年第一季度最新考勤制度内容" },
  { date: "11-12", content: "公司关于2025年第一季度最新考勤制度内容" },
  { date: "11-12", content: "公司关于2025年第一季度最新考勤制度内容" },
  { date: "11-12", content: "公司关于2025年第一季度最新考勤制度内容" },
]);

const remindList = ref([]);

// 状态映射关系
const statusMap = {
  todo: 0, // 待办
  done: 1, // 已办
  completed: 2, // 已完成
};
// 代办
const TodoListPagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
  name: "",
});
const contactsPagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

const pagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSize: [10, 20, 30, 50],
});

const formInline = reactive({
  pageNum: 1,
  pageSize: 10,
  jobName: "",
  personName: "",
  workNo: "",
});
// 获取列表数据

const fetchScheduleList = () => {
  const params = {
    status: statusMap[activeTab.value],
    page: TodoListPagination.page,
    limit: TodoListPagination.limit,
  };

  scheduleList(params)
    .then((res) => {
      todoList.value = res.data.records;
      TodoListPagination.total = res.data.total || 0;
    })
    .catch(console.error);
};

const fetchPageList = () => {
  pageList({
    pageNum: contactsPagination.page,
    pageSize: contactsPagination.limit,
    personName: contactsPagination.name,
  }).then((res) => {
    contactList.value = res.data.records;
    contactsPagination.total = res.data.total || 0;
  });
};

const fetchMyreminder = () => {
  remindList.value = [];
  Myreminder().then((res) => {
    remindList.value = res.data;
  });
};
// 初始化加载
onMounted(() => {
  fetchScheduleList(); // 待办列表
  fetchPageList(); // 分页数据
  fetchMyreminder(); //我的提醒
});

// 选项卡切换事件
const handleClick = (tab) => {
  activeTab.value = tab.props.name;
  fetchScheduleList(); // 只刷新待办列表
};

// 事件处理
const handleTabChange = (tab) => {
  activeTab.value = tab;
  TodoListPagination.page = 1;
  fetchScheduleList();
};

const handleSizeChange = (val) => {
  TodoListPagination.limit = val.limit;
  TodoListPagination.page = 1;
  fetchScheduleList();
};

const handleCurrentChange = (val) => {
  console.log(val);
  TodoListPagination.page = val.page;
  fetchScheduleList();
};

// const handleCurrentChange = (val) => {
//   console.log(val);
//   TodoListPagination.page = val.page;
//   fetchScheduleList();
// };

const handleContactsSizeChange = (val) => {
  contactsPagination.limit = val.limit;
  contactsPagination.page = 1;
  fetchPageList();
};

const handleContactsPageChange = (val) => {
  contactsPagination.page = val.page;
  fetchPageList();
};

const baseUrl = import.meta.env.VITE_APP_BASE_API;
console.log(baseUrl, "baseUrl");

// 点击处理
const handleEntryClick = (entry) => {
  console.log("进入:", entry);

  // 创建路由映射表（根据entry参数匹配路径）
  const routeMap = {
    转正管理: "/employeeRelations/regularEmployee",
    调动申请: "/employeeRelations/transferManagement",
    离职申请: "/employeeRelations/separationManagement",
    我的档案: "/archives",
  };

  // 获取对应的路由路径
  const targetPath = routeMap[entry];

  if (targetPath) {
    router.push({ path: targetPath });
  } else {
    console.warn("未知入口，使用默认路由");
    // 可选：跳转到默认页或404页面
    // router.push('/default');
  }
};

// 新功能标记
// const isNewEntry = (entry) => {
//   return entry === "我的档案";
// };

// 环境判断逻辑
const getEnvBaseUrl = () => {
  // 方案1：根据域名判断（适用于浏览器环境）
  if (
    window.location.hostname === "localhost" ||
    window.location.hostname === "127.0.0.1"
  ) {
    return "http://localhost/";
  }
  if (window.location.hostname === "172.20.19.163") {
    return "http://172.20.19.163:88/";
  }
  // 默认返回测试环境（可根据需要调整）
  return "http://172.20.19.163:88/";
};

// URL处理函数
const process = (scope) => {
  // 有效性检查
  if (!scope || typeof scope !== "string") {
    console.error("Invalid scope parameter");
    return;
  }
  let finalUrl = scope;
  if (!/^https?:\/\//i.test(scope)) {
    const baseUrl = getEnvBaseUrl();
    finalUrl = `${baseUrl.replace(/\/$/, "")}/${scope.replace(/^\//, "")}`;
  }
  window.location.href = finalUrl;
};
</script>

<style scoped lang="scss">
/* 响应式布局容器 */
.main-layout {
  height: calc(100vh - 60px);
  padding: 20px 0 0 0px;
  flex-wrap: wrap;
}

/* 通用卡片样式 */
.el-card {
  // margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  :deep(.el-card__header) {
    padding: 12px 20px;
    background: #f8f9fa;
  }
}

/* 左侧区域样式 */
.left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 16px;
  height: 100%;

  @media (max-width: 768px) {
    padding-right: 0;
  }
}

/* 右侧区域样式 */
.right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;

  @media (max-width: 768px) {
    margin-top: 16px;
  }
}

/* 表格响应式 */
.responsive-table {
  :deep(th) {
    background: #f8f9fa !important;
    color: #606266;
    font-weight: 600;
  }

  :deep(td) {
    color: #606266;
  }
}

/* 通讯录表格 */
.contact-table {
  height: 40vh;
  :deep(.cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 模块标题样式 */
.section-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;

  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}

// 代办文字
.custom-tab-text {
  transition: color 0.3s ease;
  font-size: 16px;
  color: #9aa2b1;
}
// 代办tabs
.nav-tabs {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  padding: 0px;
}
// 代办tabs组件线隐藏
:deep(.el-tabs__nav-wrap:after) {
  background-color: var(--el-border-color-light);
  bottom: 0;
  content: none !important;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: var(--el-index-normal);
}
// 代办tabs组件当前tab下线隐藏
:deep(.el-tabs__active-bar) {
  height: 0px !important;
}

// 图标文字
.custom-tabs-label {
  display: flex;
  align-items: center;
  padding: 10px 0px;
  cursor: pointer;
  transition: color 0.3s;
}
.custom-tabs-label img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  font-size: 16px;
}

// 快捷入口按钮
.entry-buttons {
  margin-top: 12px;

  .entry-btn {
    width: 100%;
    height: 40px;
    margin: 4px 0;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover {
      background: #f5f7fa;
      transform: translateY(-2px);
    }
  }
}

// 规章制度列表
.regulation-list {
  padding: 0;
  margin: 0;

  li {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f5;

    .date {
      color: #909399;
      min-width: 60px;
      margin-right: 12px;
    }

    .content {
      color: #606266;
    }
  }
}
// 通讯录喝我的提醒自适应
.reminder-card,
.auto-card-left {
  flex: 1 !important;
  border-radius: 8px !important;
  border: 1px solid #fff !important;
  background: #fcfcfd !important;

  /* 阴影1 */
  box-shadow: -38px 83px 25px 0px rgba(168, 168, 189, 0),
    -24px 53px 23px 0px rgba(168, 168, 189, 0.01),
    -14px 30px 20px 0px rgba(168, 168, 189, 0.02),
    -6px 13px 15px 0px rgba(168, 168, 189, 0.03),
    -2px 3px 8px 0px rgba(168, 168, 189, 0.04) !important;
}

/* 提醒列表 */
.reminder-list {
  padding: 0;

  .reminder-item {
    display: flex;
    align-items: center;
    padding: 8px 0;

    .dot {
      color: #f56c6c;
      margin-right: 8px;
    }

    .text {
      color: #606266;
      margin: 0;
      font-size: 14px;
    }

    .date {
      color: #909399;
      font-size: 12px;
      margin-top: 2px;
    }
  }
}
/* 头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}



/* 响应式媒体查询 */
@media (max-width: 1200px) {
  .main-layout {
    height: auto;
    flex-direction: column;
  }

  .left-col,
  .right-col {
    width: 100% !important;
    max-width: 100%;
  }

  .el-col-md-16,
  .el-col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .search-input {
    width: 30%;
    height: 36px;
    border-radius: 100px;
  }
  .left-col {
    padding-right: 0px;
  }
}

@media (max-width: 768px) {
  .entry-buttons .el-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .regulation-list li {
    flex-direction: column;

    .date {
      margin-bottom: 4px;
    }
  }
  .entry-btn {
    height: 42px;
    font-size: 13px;
  }
}

/* 按钮容器 */
.entry-buttons {
  margin: -5px; /* 抵消gutter产生的额外间距 */

  /* 列间距统一处理 */
  [class*="el-col"] {
    padding: 5px; /* 与gutter值匹配 */
  }
}

/* 按钮样式 */
.entry-btn {
  width: 100%;
  height: 48px;
  margin: 0;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 默认状态 */
  border-color: #ebeef5;
  background: #f8f9fa;
  color: #606266;

  /* 悬停状态 */
  &:hover {
    background: #ffffff;
    border-color: #409eff;
    color: #409eff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }

  /* 激活状态 */
  &:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* 新功能标记 */
  .hot-tag {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #f56c6c;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
  }
}
// 我的提醒
.header-with-more {
  display: flex;
  justify-content: space-between;
}

.custom-list-item {
  list-style: none;
  position: relative;
  padding-left: 20px;
}
.custom-list-item::before {
  content: "●";
  color: #f56c6c; /* 可修改为任意颜色 */
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 10px;
  /* 添加动画效果 */
  transition: transform 0.3s ease;
}

.custom-list-item:hover::before {
  transform: scale(1.2);
}

.search-input ::v-deep(.el-input__inner::placeholder) {
  opacity: 1 !important;
  /* 确保颜色不透明 */

  color: var(--Primary4-200, #b7bdc7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* 兼容不同浏览器 */
.search-input ::v-deep(.el-input__inner::-webkit-input-placeholder) {
  color: var(--Primary4-200, #b7bdc7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.search-input ::v-deep(.el-input__inner::-moz-placeholder) {
  color: var(--Primary4-200, #b7bdc7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.search-input ::v-deep(.el-input__inner:-ms-input-placeholder) {
  color: var(--Primary4-200, #b7bdc7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

</style>
